<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>页面的模板</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/static/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/adminlte/dist/css/skins/_all-skins.min.css">


</head>

<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">

    <jsp:include page="common/header.jsp"></jsp:include>
    <jsp:include page="common/mune.jsp"></jsp:include>


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                Page Header
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content container-fluid">
            <h1>Ajax 的入门</h1>
            <hr>
            <button id="btnGetMsg" class="btn btn-success">发请求获取数据（内容）</button>
            <div id="showMsg" style="font-size: 30px;color: blueviolet"></div>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/adminlte/dist/js/adminlte.min.js"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
<script>
   $(function () {
       $("#btnGetMsg").click(function (e) {
           //这段代码大家直接从源码中复制，不用去查网络
          $.ajax({
               type: "POST",
               url: "/msg.do",
               data: {},
               dataType:"json",
               success: function(obj){
                   if(obj.success){
                       var stu = obj.data;
                       $("#showMsg").html(stu.id + "/" + stu.name)
                   }
                   // $("#showMsg").html(obj.msg)
               }
           });
         /*
         //  这段代码是上面那段代码的 简写方式。我个人推荐上面的写法
         $.post("/msg.do",{},function (data) {
              $("#showMsg").html(data.msg + "AAA")
          },"json");*/
       });
   })
</script>
</html>
